@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: "Microsoft yahei"; }

body, textarea, input, select, option {
  color: #333;
  font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }

body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form {
  margin: 0;
  padding: 0; }

ol, ul, textarea, input, option, th, td {
  padding: 0; }

.page {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%; }

a, select, input, textarea {
  outline: none; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul, ol {
  list-style-type: none; }

.hide {
  display: none; }

.show {
  display: block; }

.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clear {
  clear: both;
  height: 0;
  overflow: hidden; }

/* ios默认文本框阴影 */
input[type=text], textarea {
  -webkit-appearance: none; }

/* 低版本安卓文本框层级问题 */
input:focus {
  -webkit-user-modify: read-write-plaintext-only; }

fieldset, img {
  border: 0; }

a {
  text-decoration: none; }

a, textarea, input {
  outline: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

textarea {
  overflow: auto;
  resize: none; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 75% !important;
    /* 12÷16=75% */ } }

/**
    62.5%   10px;
    640 150%    24px;
    320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
    320/640  * 24 / 16 = 75%;
    375/640  * 24 / 16 = 87.89%;
    414/640  * 24 / 16 = 97.03%
*/
@media only screen and (min-width: 360px) {
  html {
    font-size: 84.3% !important;
    /* 13.5÷16=84.3% */ } }

@media only screen and (min-width: 375px) {
  html {
    font-size: 87.89062% !important;
    /* 14.0625÷16=87.890625% */ } }

@media only screen and (min-width: 384px) {
  html {
    font-size: 90% !important;
    /* 14.4÷16=90% */ } }

@media only screen and (min-width: 390px) {
  html {
    font-size: 91.4% !important;
    /* 14.625÷16=91.4% */ } }

@media only screen and (min-width: 412px) {
  html {
    font-size: 96.56% !important;
    /* 15.45÷16=96.56% */ } }

@media only screen and (min-width: 414px) {
  html {
    font-size: 97.03% !important;
    /* 15.525÷16=97.03% */ } }

@media only screen and (min-width: 480px) {
  html {
    font-size: 112.5% !important;
    /* 18÷16=112.5% */ } }

@media only screen and (min-width: 560px) {
  html {
    font-size: 131.25% !important;
    /* 21÷16=131.25% */ } }

@media only screen and (min-width: 640px) {
  html {
    font-size: 150% !important;
    /* 24÷16=150% */ } }

@media only screen and (min-width: 720px) {
  html {
    font-size: 168.75% !important;
    /* 27÷16=168.75% */ } }

@media only screen and (min-width: 750px) {
  html {
    font-size: 175.78125% !important;
    /* 28.125÷16=175.78125% */ } }

body {
  background: #f5f4f0; }

.header {
  height: 4.08333rem;
  background: #00b459; }
  .header h2 {
    float: left;
    height: 4.08333rem;
    line-height: 4.08333rem;
    font-size: 1.33333rem;
    color: #f4f4f4;
    padding-left: 0.83333rem; }
  .header .city {
    float: right;
    height: 4.08333rem;
    line-height: 4.08333rem;
    font-size: 1.25rem;
    color: #f4f4f4;
    padding: 0 0.83333rem 0 0.33333rem; }
    .header .city i {
      display: inline-block;
      width: 0.625rem;
      height: 0.33333rem;
      background: url(img/down.png) no-repeat 0 0;
      background-size: 0.625rem 0.33333rem;
      margin-left: 0.58333rem;
      vertical-align: middle;
      margin-top: -0.08333rem; }
  .header .search {
    margin: 0 5.29167rem 0 7.125rem;
    padding-top: 0.79167rem; }
    .header .search .so {
      height: 2.5rem;
      background: #0c8a4a;
      border-radius: 1.25rem; }
      .header .search .so i {
        float: left;
        width: 1.125rem;
        height: 1.125rem;
        background: red;
        margin: 0.70833rem 0 0 0.95833rem; }
      .header .search .so .input {
        margin-left: 2.54167rem;
        margin-right: 0.41667rem; }
        .header .search .so .input input {
          width: 100%;
          height: 2.5rem;
          border: none;
          background: none; }

.h3 {
  height: 3.25rem;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 1.25rem; }
  .h3 h3 {
    float: left;
    padding-left: 1.04167rem;
    height: 3.25rem;
    line-height: 3.25rem;
    font-size: 1rem;
    color: #666;
    position: relative; }
    .h3 h3:after {
      content: "";
      display: block;
      position: absolute;
      width: 0.25rem;
      height: 1.16667rem;
      background: #00b459;
      left: 0;
      top: 1.04167rem;
      border-radius: 0.125rem;
      z-index: 3;
      /*
                zindex层级
                弹出层
                    1、遮罩 900
                    2、弹出窗999
                页面中
                1-100
                header
                    100+
            */ }
  .h3 a {
    float: right;
    height: 3.25rem;
    line-height: 3.25rem;
    font-size: 1rem;
    color: #666; }

.hot-teacher {
  margin: 0 0.625rem; }
  .hot-teacher ul {
    margin: 0.375rem 0 0.83333rem; }
    .hot-teacher ul li {
      float: left;
      width: 50%;
      padding: 0 0.20833rem;
      box-sizing: border-box;
      margin-top: 0.41667rem; }
      .hot-teacher ul li .li-con {
        border: 1px solid #e5e5e5;
        background: #fff;
        height: 9.66667rem; }
        .hot-teacher ul li .li-con p {
          height: 1.66667rem;
          line-height: 1.66667rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100px; }

.hot-teacher2 {
  padding: 0 0.70833rem;
  background: #fff; }
  .hot-teacher2 li {
    float: left;
    width: 33.3%;
    padding: 0 0.41667rem;
    box-sizing: border-box;
    margin-top: 0.41667rem; }
    .hot-teacher2 li .li-con {
      width: 7.5rem;
      height: 7.5rem;
      border: 1px solid #e5e5e5; }
      .hot-teacher2 li .li-con p {
        height: 1.66667rem;
        line-height: 1.66667rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px; }

.state-page {
  width: 500px;
  margin: 0 auto; }

.input {
  width: 500px;
  margin: 0 auto; }

.event_con {
  width: 500px;
  margin: 0 auto; }

.tab_box {
  width: 500px;
  margin: 0 auto; }
  .tab_box ol {
    height: 40px;
    overflow: hidden; }
    .tab_box ol li {
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      background: #ccc;
      margin-right: 10px;
      cursor: pointer; }
      .tab_box ol li.cur {
        background: #f60; }
  .tab_box ul li {
    height: 40px;
    overflow: hidden;
    font-size: 14px; }
  .tab_box .tab_box_con .tab_con_list {
    height: 200px;
    border: 1px solid red;
    display: none; }
  .tab_box .tab_box_con .current {
    display: block; }

.input_con {
  width: 500px;
  margin: 0 auto 300px; }
